<template>
	<view class="navigation-bar" :style="{height:configOptions.mode==='fixed'?0:height}" v-if="wxVersion >=7">
		<view class="navigation-bar-fixed" :style="{height:height,background:(!configOptions.transparent&&!configOptions.linear)?configOptions.bgcolor:'transparent'}">
			<!-- capsule or normal -->

			<view class="navigation-bar-back" :style="{'margin-top':marginTop}">
				<view class="navigation-bar-backbtn" v-if="configOptions.isNavigateBack==true">
					<view class="click-item" @tap="back_">
						<i-icon type="icon-goback" size="32" :color="configOptions.fontcolor"></i-icon>
					</view>
				</view>
			</view>

			<!-- title -->
			<view class="navigation-bar-title" :style="{'marginTop':marginTop,'color':configOptions.fontcolor}">
				{{configOptions.title}}
			</view>
			<view class="navigation-bar-right"></view>
			<!-- linear background -->
			<view v-if="configOptions.linear" class="navigation-bar-linear" :style="{height:height,background:configOptions.bgcolor,opacity:scrollTop2/scrollMaxHeight}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			config:{
				type:Object
			},
			scrollTop:{
				type:Number,
				default:0
			},
			scrollMaxHeight:{
				type:Number,
				default:150
			}
		},
		components: {

		},
		data() {
			return {
				configOptions:{
					title:"",
					bgcolor:"#fff",
					/*
                    * 默认为insert插入模式，即外层容器会占位组件的高度；主要应用在自动撑开背景
                    * fixed浮动模式，即外层容器不占位组件的高度为0；表现为叠加行为
                    * */
					mode:"insert",
					isNavigateBack:false,
					linear:false,
					linearTitle:false,
					transparent:false,
					fontcolor:"#FFFFFF"
				},
				scrollTop2:0,
				nav_show: false,
			};
		},
		watch: {
			scrollTop(newVal) {
				// this.nav_show = false;
				this.scrollTop2 = newVal;
				if (newVal<0) {
					this.scrollTop = 0
				}
			}
		},
		computed:{
			height(){
				const {platform,statusBarHeight} = uni.getSystemInfoSync()
				let height = statusBarHeight +4 //ios 24px
				if (platform.toLowerCase() == "android" ){
					height +=4 //android 28px
				}
				// 胶囊高度 32px 下边框6px height 状态栏高度
				return height+ 44 + "px"
			},
			marginTop(){
				const {platform,statusBarHeight} = uni.getSystemInfoSync()
				let height = statusBarHeight +4
				if (platform.toLowerCase() == "android" ){
					height +=4
				}
				return height + "px"
			},
			//获取微信版本号，做向下兼容   todo：自微信客户端 7.0.0 起、App端HBuilderX 2.0.3起，支持通过如下方法取消单独一个页面的原生导航栏
			wxVersion() {
				let systemInfo = uni.getSystemInfoSync();
				let version = parseInt(systemInfo.version)
				return version;
			}
		},
		// updated() {
		//     console.log(this.config)
		// },
		mounted() {
			// console.log(this.config)
			this.configOptions = Object.assign({},this.configOptions,this.config)
		},

		methods:{
			back_(){
				this.$emit('navigateBack');
				/*uni.navigateBack({
                    delta:1
                });*/
				if(getCurrentPages().length > 1){
					uni.navigateBack();
				}else {
					uni.switchTab({
						url:'/pages/home/index'
					})
				}
			},
			_onItemClick(item) {
				this.nav_show = false;
				if(item.text === '卡券') {
					uni.navigateTo({
						url: item.pagePath
					});
				}else {
					uni.switchTab({
						url: item.pagePath
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.navigation-bar{
		width: 100vw;
		box-sizing: border-box;
		.navigation-bar-fixed{
			width: 100vw;
			position: fixed;
			top:0;
			right: 0;
			left:0;
			box-sizing: border-box;
			z-index: 999;
			background: #fff;
			display: flex;
			justify-content: space-between;
			.navigation-bar-linear{
				width: 100vw;
				position: absolute;
				box-sizing: border-box;
				z-index: -1;
			}
			.navigation-bar-right{
				width: 100upx;
				line-height: 32px;
				height: 32px;
			}
			.verticalLine {
				width: 2upx;
				height: 37upx;
				background-color: #e5e5e5;
				margin-left: 10upx;
				margin-right: 10upx;
				transform:scaleX(.3);
			}

			.navigation-bar-back{
				width: 160upx;
				margin-left: 10upx;
				.navigation-bar-backbtn{
					position: relative;
					height: 64upx;
					width: 60upx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-left: 10upx;
					padding-right: 10upx;
					&:before{
					}
					&:after{
					}
				}
			}
			.navigation-bar-title{
				width: 280upx;
				line-height: 32px;
				height: 32px;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
				font-weight: bold;
				overflow: hidden;
				margin-left: -84upx;
			}
		}
	}

	.click-item {
		width: 100%;
		text-align: center;
	}
</style>
